<template>
  <div class="wrapper">
    <div class="title">配套设施</div>
    <ul class="clearfix">
      <li
        v-for="(item, index) in facility"
        :key="index" class="clearfix" :class="{action:item.is_action}"
      >
          <span class="iconfont" :class="item.icon"></span>
          <div>{{item.title}}</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'CompanyFacility',
  props: {
    facility: Array
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.wrapper
  padding .2rem /* 10/50 */ .4rem /* 20/50 */
  margin-bottom 1rem /* 77/50 */
  .title
    height .74rem /* 37/50 */
    font-size .36rem /* 18/50 */
    font-weight bold
    line-height .74rem /* 37/50 */
    color #333333
  ul
    margin-top .6rem /* 30/50 */
    li
      width 25%
      float left
      text-align center
      font-size .24rem /* 24/50 */
      height 1.24rem /* 124/50 */
      color #999
      .iconfont
        font-size .44rem /* 44/50 */
    li.action
      color #ec6941
</style>
